"use client";
import { Button, Card } from 'antd';
import React, { PropsWithChildren } from 'react';
import { useSelector } from 'react-redux';

import * as counterSlice from './slice';
import { useAppDispatch } from '@/data/store';

export const CounterControl: React.FC<PropsWithChildren> =({children})=> {
  const counter = useSelector(counterSlice.selectCounter);

  return (
    <Card title = {`${counter}`}>
      {children}
    </Card>
  );
}

export const CounterOperatorControl: React.FC = ()=> {
  const dispatch = useAppDispatch();

  return (
    <div>
        <Button variant="outlined" onClick={() => dispatch(counterSlice.increment())}>
          ADD
        </Button>
        <Button
          variant="outlined"
          onClick={() => dispatch(counterSlice.decrement())}
        >
          MINUS
        </Button>
    </div>
  );
}
